/*通用全局变量*/

@import 'variables.scss';

@font-face {
  font-family: uniicons;
  font-weight: normal;
  font-style: normal;
  /* src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype'); */
  src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf?t=1536565627510') format('truetype');
}

/*通用 */

view {
  display: flex;
  flex-direction: row; // line-height: 180%;
  line-height: 1.8em;
  font-size: $uni-font-size-base;
}

.ts-space-between {
  justify-content: space-between !important;
}

.ts-full-width {
  width: 100%;
}

.ts-gap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: $ts-padding;
  background: $uni-bg-color-grey;
}

.ts-center {
  justify-content: center;
  align-items: center;
}

.ts-flex {
  display: flex;
  flex-direction: row;
}

.ts-flex-item {
  flex: 1;
}

.ts-row {
  display: flex;
  flex-direction: row;
}

.ts-column {
  display: flex;
  flex-direction: column;
}

.ts-h6 {
  font-size: $ts-h6;
  color: #8f8f94;
  line-height: 1.8em;
}

.ts-h5 {
  font-size: $ts-h5;
  line-height: 1.8em;
}

.ts-h4 {
  font-size: $ts-h4;
  line-height: 1.8em;
}

.ts-h3 {
  font-size: $ts-h3;
  line-height: 1.8em;
}

.ts-h2 {
  font-size: $ts-h2;
  line-height: 1.8em;
}

.ts-h1 {
  font-size: $ts-h1;
  line-height: 1.8em;
}

.ts-input {
  height: 50upx;
  min-height: 50upx;
  width: 100%;
  padding: 15upx 0;
  line-height: 50upx;
}

.ts-font-size-sm{
	font-size: $uni-font-size-sm;
}
.ts-font-size-base{
	font-size: $uni-font-size-base;
}
.ts-font-size-lg{
	font-size: $uni-font-size-lg;
}

/*数字角标*/

//     .ts-badge,
//     .ts-badge-default {
//         font-family: 'Helvetica Neue', Helvetica, sans-serif;
//         box-sizing: border-box;
//         font-size: 20upx;
//         line-height: 20upx;
//         padding: 5upx 5upx;
//         color: #333;
//         border-radius: 10upx;
//     }
//
//     .ts-badge.ts-badge-inverted {
//         padding: 0 5upx 0 0;
//         color: #929292;
//         background-color: transparent
//     }
//
//     .ts-badge-primary {
//         color: #fff;
//         background-color: #007aff
//     }
//
//     .ts-badge-blue.ts-badge-inverted,
//     .ts-badge-primary.ts-badge-inverted {
//         color: #007aff;
//         background-color: transparent
//     }
//
//     .ts-badge-green,
//     .ts-badge-success {
//         color: #fff;
//         background-color: #4cd964;
//     }
//
//     .ts-badge-green.ts-badge-inverted,
//     .ts-badge-success.ts-badge-inverted {
//         color: #4cd964;
//         background-color: transparent
//     }
//
//     .ts-badge-warn,
//     .ts-badge-yellow {
//         color: #fff;
//         background-color: #f0ad4e
//     }
//
//     .ts-badge-warn.ts-badge-inverted,
//     .ts-badge-yellow.ts-badge-inverted {
//         color: #f0ad4e;
//         background-color: transparent
//     }
//
//     .ts-badge-danger,
//     .ts-badge-red {
//         color: #fff;
//         background-color: #dd524d
//     }
//
//     .ts-badge-danger.ts-badge-inverted,
//     .ts-badge-red.ts-badge-inverted {
//         color: #dd524d;
//         background-color: transparent
//     }
//
//     .ts-badge-purple,
//     .ts-badge-royal {
//         color: #fff;
//         background-color: #8a6de9
//     }
//
//     .ts-badge-purple.ts-badge-inverted,
//     .ts-badge-royal.ts-badge-inverted {
//         color: #8a6de9;
//         background-color: transparent
//     }
//
/*折叠面板 */

.ts-collapse-content {
  height: 0;
  width: 100%;
  overflow: hidden;
}

.ts-collapse-content.ts-active {
  height: auto;
}

/*卡片视图 */

.ts-card {
  background: #fff;
  border-radius: 8upx;
  margin: 20upx 0;
  position: relative;
  box-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.3);
}

.ts-card-content {
  font-size: 30upx;
}

.ts-card-content.image-view {
  width: 100%;
  margin: 0;
}

.ts-card-content-inner {
  position: relative;
  padding: 30upx;
}

.ts-card-footer,
.ts-card-header {
  position: relative;
  display: flex;
  min-height: 50upx;
  padding: 20upx 30upx;
  justify-content: space-between;
  align-items: center;
}

.ts-card-header {
  font-size: 36upx;
}

.ts-card-footer {
  color: #6d6d72;
}

.ts-card-footer:before,
.ts-card-header:after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2upx;
  content: '';
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  background-color: #c8c7cc;
}

.ts-card-header:after {
  top: auto;
  bottom: 0;
}

.ts-card-media {
  justify-content: flex-start;
}

.ts-card-media-logo {
  height: 84upx;
  width: 84upx;
  margin-right: 20upx;
}

.ts-card-media-body {
  height: 84upx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.ts-card-media-text-top {
  line-height: 36upx;
  font-size: 34upx;
}

.ts-card-media-text-bottom {
  line-height: 30upx;
  font-size: 28upx;
  color: #8f8f94;
}

.ts-card-link {
  color: #007aff;
}

/* 列表 */

.ts-list {
  background-color: #ffffff;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.ts-list:after {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1upx;
  content: '';
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  background-color: #c8c7cc;
}

.ts-list:before {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  left: 0;
  height: 1upx;
  content: '';
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  background-color: #c8c7cc;
}

.ts-list-cell {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.ts-list-cell-hover {
  background-color: #eee;
}

.ts-list-cell-pd {
  padding: 22upx 30upx;
}

.ts-list-cell-left {
  padding: 0 30upx;
}

.ts-list-cell-db,
.ts-list-cell-right {
  flex: 1;
}

.ts-list-cell:after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 30upx;
  height: 1upx;
  content: '';
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  background-color: #c8c7cc;
}

.ts-list .ts-list-cell:last-child:after {
  height: 0upx;
}

.ts-list-cell-last.ts-list-cell:after {
  height: 0upx;
}

.ts-list-cell-divider {
  position: relative;
  display: flex;
  color: #999;
  background-color: #f7f7f7;
  padding: 10upx 20upx;
}

.ts-list-cell-divider:before {
  position: absolute;
  right: 0;
  top: 0;
  left: 0upx;
  height: 1upx;
  content: '';
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  background-color: #c8c7cc;
}

.ts-list-cell-divider:after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0upx;
  height: 1upx;
  content: '';
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  background-color: #c8c7cc;
}

.ts-list-cell-navigate {
  padding: 22upx 30upx;
  line-height: 48upx;
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  flex: 1;
  justify-content: space-between;
  align-items: center;
}

.ts-list-cell-navigate {
  padding-right: 36upx;
}

.ts-navigate-badge {
  padding-right: 50upx;
}

.ts-list-cell-navigate.ts-navigate-right:after {
  font-family: uniicons;
  content: '\e583';
  position: absolute;
  right: 24upx;
  top: 50%;
  color: #bbb;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ts-list-cell-navigate.ts-navigate-bottom:after {
  font-family: uniicons;
  content: '\e581';
  position: absolute;
  right: 24upx;
  top: 50%;
  color: #bbb;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ts-list-cell-navigate.ts-navigate-bottom.ts-active:after {
  font-family: uniicons;
  content: '\e580';
  position: absolute;
  right: 24upx;
  top: 50%;
  color: #bbb;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ts-collapse.ts-list-cell {
  flex-direction: column;
}

.ts-list-cell-navigate.ts-active {
  background: #eee;
}

.ts-list.ts-collapse {
  box-sizing: border-box;
  height: 0;
  overflow: hidden;
}

.ts-collapse .ts-list-cell {
  padding-left: 36upx;
}

.ts-collapse .ts-list-cell:after {
  left: 52upx;
}

.ts-list.ts-active {
  height: auto;
}

/* 三行列表 */

.ts-triplex-row {
  display: flex;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  flex-direction: row;
  padding: 22upx 30upx;
}

.ts-triplex-right,
.ts-triplex-left {
  display: flex;
  flex-direction: column;
}

.ts-triplex-left {
  width: 84%;
}

.ts-triplex-right {
  width: 16%;
  text-align: right;
}

/* 图文列表 */

.ts-media-list {
  padding: 22upx 30upx;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  flex-direction: row;
}

.ts-navigate-right.ts-media-list {
  padding-right: 74upx;
}

.ts-pull-right {
  flex-direction: row-reverse;
}

.ts-pull-right>.ts-media-list-logo {
  margin-right: 0upx;
  margin-left: 20upx;
}

.ts-media-list-logo {
  height: 84upx;
  width: 84upx;
  margin-right: 20upx;
}

.ts-media-list-logo image {
  height: 100%;
  width: 100%;
}

.ts-media-list-body {
  height: 84upx;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
}

.ts-media-list-text-top {
  width: 100%;
  line-height: 36upx;
  font-size: 34upx;
}

.ts-media-list-text-bottom {
  width: 100%;
  line-height: 30upx;
  font-size: 28upx;
  color: #8f8f94;
}

/* 九宫格 */

.ts-grid-9 {
  background: #f2f2f2;
  width: 750upx;
  /* flex: 1; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-top: 2upx solid #eee;
}

.ts-grid-9-item {
  width: 250upx;
  height: 200upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 2upx solid;
  border-right: 2upx solid;
  border-color: #eee;
  box-sizing: border-box;
}

.no-border-right {
  border-right: none;
}

.ts-grid-9-image {
  width: 100upx;
  height: 100upx;
}

.ts-grid-9-text {
  width: 250upx;
  line-height: 60upx;
  height: 40upx;
  text-align: center;
  font-size: 30upx;
}

.ts-grid-9-item-hover {
  background: rgba(0, 0, 0, 0.1);
}

/* 上传 */

.ts-uploader {
  flex: 1;
  flex-direction: column;
}

.ts-uploader-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.ts-uploader-info {
  color: #b2b2b2;
}

.ts-uploader-body {
  margin-top: 16upx;
  overflow: hidden;
}

.ts-uploader__file {
  float: left;
  margin-right: 18upx;
  margin-bottom: 18upx;
}

.ts-uploader__img {
  display: block;
  width: 158upx;
  height: 158upx;
}

.ts-uploader__input-box {
  float: left;
  position: relative;
  margin-right: 18upx;
  margin-bottom: 18upx;
  width: 154upx;
  height: 154upx;
  border: 2upx solid #d9d9d9;
}

.ts-uploader__input-box:before,
.ts-uploader__input-box:after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}

.ts-uploader__input-box:before {
  width: 4upx;
  height: 79upx;
}

.ts-uploader__input-box:after {
  width: 79upx;
  height: 4upx;
}

.ts-uploader__input-box:active {
  border-color: #999999;
}

.ts-uploader__input-box:active:before,
.ts-uploader__input-box:active:after {
  background-color: #999999;
}

.ts-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/*问题反馈*/

.feedback-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20upx;
  color: #8f8f94;
  font-size: 28upx;
}

.feedback-star-view.feedback-title {
  justify-content: flex-start;
  margin: 0;
}

.feedback-quick {
  position: relative;
  padding-right: 40upx;
}

.feedback-quick:after {
  font-family: uniicons;
  font-size: 40upx;
  content: '\e581';
  position: absolute;
  right: 0;
  top: 50%;
  color: #bbb;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.feedback-body {
  background: #fff;
}

.feedback-textare {
  height: 200upx;
  font-size: 34upx;
  line-height: 50upx;
  width: 100%;
  box-sizing: border-box;
  padding: 20upx 30upx 0;
}

.feedback-input {
  font-size: 34upx;
  height: 50upx;
  min-height: 50upx;
  padding: 15upx 20upx;
  line-height: 50upx;
}

.feedback-uploader {
  padding: 22upx 20upx;
}

.feedback-star {
  font-family: uniicons;
  font-size: 40upx;
  margin-left: 6upx;
}

.feedback-star-view {
  margin-left: 20upx;
}

.feedback-star:after {
  content: '\e408';
}

.feedback-star.active {
  color: #ffb400;
}

.feedback-star.active:after {
  content: '\e438';
}

.feedback-submit {
  background: #007aff;
  color: #ffffff;
  margin: 20upx;
}


/*背景颜色*/

// .ts-background-black {
//   background: #000000;
// }
// 
// .ts-background-white {
//   background: #ffffff;
// }
// 
.ts-background-primary {
  background: $uni-color-primary;
}

.ts-background-success {
  background: $uni-color-success;
}

.ts-background-warning {
  background: $uni-color-warning;
}

.ts-background-error {
  background: $uni-color-error;
}

.ts-text {
  font-size: 30upx;
  line-height: 2.2em;
}

.ts-text-small {
  font-size: 24upx;
  line-height: 1.8em;
}

.ts-text-indent {
  text-indent: 2em;
}

.ts-text-bold {
  font-weight: bold;
}

.ts-text-discount {
  text-decoration: line-through;
}

/*文本颜色*/
.ts-text-default {
  color: #000000;
}

.ts-text-primary {
  color: $uni-color-primary;
}

.ts-text-success {
  color: $uni-color-success;
}

.ts-text-warning {
  color: $uni-color-warning;
}

.ts-text-error {
  color: $uni-color-error;
}


.ts-ellipsis {
  display: -webkit-box;
  text-overflow: ellipsis;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.ts-ellipsis-2 {
  display: -webkit-box;
  text-overflow: ellipsis;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ts-ellipsis-3 {
  display: -webkit-box;
  text-overflow: ellipsis;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/*padding and margin*/

.ts-padding {
  padding: $ts-padding;
}

.ts-padding-left {
  padding-left: $ts-padding;
}

.ts-padding-right {
  padding-right: $ts-padding;
}

.ts-padding-bottom {
  padding-bottom: $ts-padding;
}

.ts-padding-top {
  padding-top: $ts-padding;
}

// .ts-padding-both {
//   padding-top: $ts-padding;
//   padding-bottom: $ts-padding;
// }

// .ts-margin {
//   margin: $ts-padding;
// }
// 
// .ts-margin-left {
//   margin-left: $ts-padding;
// }
// 
// .ts-margin-right {
//   margin-right: $ts-padding;
// }
// 
// .ts-margin-bottom {
//   margin-bottom: $ts-padding;
// }
// 
// .ts-margin-top {
//   margin-top: $ts-padding;
// }
// 
// .ts-margin-both {
//   margin-top: $ts-padding;
//   margin-bottom: $ts-padding;
// }

/*通用章节布局*/
.ts-section {
  background-color: $uni-bg-color;
  position: relative;
  // width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.8em;
}

.ts-section-body {
  background-color: $uni-bg-color;
  position: relative; // width: 100%;
  display: flex;
  flex-direction: column;
  // flex: 1;
  padding: $ts-padding;
  font-size: $uni-font-size-base; // line-height: 150%;
  line-height: 1.8em;
}

.ts-section-body.no-padding {

  padding: 0upx;
}

.ts-section-footer {
  background-color: $uni-bg-color;
  position: relative; // width: 100%;
  display: flex;
  flex: 1;
  flex-direction: row;
  padding: $ts-padding;
  font-size: $uni-font-size-base;
  line-height: 1.8em;

  &:before {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 0;
    left: 0;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: $uni-border-color;
  }
}

.ts-section-title {
  background-color: $uni-bg-color;
  position: relative; // width: 100%;
  color: $uni-color-title;
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.8em;
  padding: $ts-padding;
  font-size: $uni-font-size-lg;
  font-weight: bold;

  &:after {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: $uni-border-color; // background-color: #c8c7cc;
  }
}